<!DOCTYPE html>
<html>
<head>
    <title>pic</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <style type="text/css">
    	body{
    		overflow: hidden;
    	}
        #banner {
            margin: 0 auto;
            top: -10px;
            position: relative; 
            width: 1028px; 
            height: 770px; 
            /*border: 1px solid #666;*/
            overflow: hidden;         
        }
        #banner_list img {
         border: 0px;
        }
        #banner_bg { 
            position: absolute; 
            bottom: 0; 
            /*background-color: #000;*/
            height: 30px; 
            filter: Alpha(Opacity=30); 
            opacity: 0.3; 
            z-index: 1000; 
            cursor: pointer; width: 478px;
        }
        #banner_text { 
            position: absolute; 
            width: 120px; 
            z-index: 1002; 
            right: 3px; 
            bottom: 3px;
        }
        #banner ul { 
            position: absolute; 
            list-style-type: none; 
            filter: Alpha(Opacity=80); 
            opacity: 0.8; 
            z-index: 1002; 
            margin: 0; 
            padding: 0; 
            bottom: 3px; 
            right: 5px;
        }
        #banner ul li { 
            padding: 0px 8px; 
            float: left; 
            display: block; 
            color: #FFF; 
            background: #6f4f67; 
            cursor: pointer; 
            border: 1px solid #333;
            display: none;
        }
        #banner ul li.on { 
            background-color: #000;
        }
        #banner_list a { 
            position: absolute;
        }
        <!--
        让四张图片都可以重叠在一起-->
        #bg-img {    
            -webkit-filter: blur(10px); /* Chrome, Opera */
            -moz-filter: blur(10px);
            -ms-filter: blur(10px);    
            filter: blur(10px);
            position: absolute !important;
            width: 833px;
            height: 624px;
            left: 17.65%;
        }
        #bg-div{
        	margin: 0 auto;
        }
        .show-img{
        	width: 1028px;
        	height: 770px;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="bg-div">
    	<img src="image/bg/1.1.jpg" id="bg-img">
    </div>
    <div id="banner">        
        <ul id="main-title"></ul>
        <div id="banner_list"></div>
    </div>    
</div>
</body>
<script type="text/javascript">
    var t = n = 0,
    count;
    var _width = window.innerWidth;
    var _height = window.innerHeight;
    $(document).ready(function() {
        getULList();

        setTimeout(1000);
        $("#content").css({"width":_width - 50,"height":_height - 50});        
        $("#bg-img").css({
        	"width":"101%",
        	"height":680,
        	"position":"absolute",
        	"left":"0",
        	"top":"0",
        	"-webkit-filter":"blur(10px)",
        	"-moz-filter":"blur(10px)",
        	"-ms-filter":"blur(10px)",
        	"filter":"blur(10px)"
        });
        $("#bg-img").click(function(e) {           
            var $i = $("<span />").text("love");        
            var x = e.pageX, y = e.pageY;
            $i.css({
                "z-index": 999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#ff6651"
            });
            $("body").append($i);
            $i.animate({"top": y - 180,"opacity": 0}, 1500, function() {
                $i.remove();
            });
        });

        // 图片链接的总数
        count = $("#banner_list img").length;
        // 隐藏第一个图片以外的图片
        $("#banner_list img:not(:first-child)").hide();
        // 给li添加点击事件
        $("#banner li").click(function() {
            var i = $(this).text() - 1; //获取Li元素内的值，即1，2，3，4
            n = i;
            if (i >= count) return;
            $("#banner_list img").filter(":visible").fadeOut(1000).parent().children().eq(i).fadeIn(3000);

            var _index = i + 1;
            var newSrc = "image/bg/" + _index + ".1.jpg";
            $("#bg-img").fadeOut(1000).attr("src", newSrc).fadeIn(1500);
        });
        t = setInterval("showAuto()", 4000);
        $("#banner").hover(function() {
            // clearInterval(t)
        },
        function() {
            // t = setInterval("showAuto()", 5000);
        });
    })
  
    function showAuto() {
        n = n >= (count - 1) ? 0 : ++n;
        $("#banner li").eq(n).trigger('click');
    }
    function getULList(){
        var ul_html = "", banner_html = "";
        for(var i = 1;i <=37;i++) {
            ul_html += "<li>" + i + "</li>";
            banner_html += "<img src='image/" + i + ".png' class='show-img'>";
        }
        $("#main-title").html(ul_html);
        $("#banner_list").html(banner_html);
    }
</script>
</html>